// components/FlowerVideoGrid.tsx
import React, { useState } from 'react';
import { FlowerVideo } from './types';
import VideoCard from './VideoCard';
import './Video.css'
const Video: React.FC = () => {
  const [currentPage, setCurrentPage] = useState<number>(1);
  const itemsPerPage = 8;
  
  // 模拟花卉视频数据
  const videos: FlowerVideo[] = [
    { id: 1, title: "白色樱花", imageUrl: "https://images.unsplash.com/photo-1591438254523-5dd49b2dbd76?auto=format&fit=crop&w=600", description: "春日樱花盛开季" },
    { id: 2, title: "粉色玉兰花", imageUrl: "https://images.unsplash.com/photo-1580193769210-b8d1c049a7d9?auto=format&fit=crop&w=600", description: "庭院玉兰竞相开放" },
    { id: 3, title: "红色罂粟花", imageUrl: "https://images.unsplash.com/photo-1581831350000-eeaa0ee99a83?auto=format&fit=crop&w=600", description: "田野红色罂粟花海" },
    { id: 4, title: "紫色风信子", imageUrl: "https://images.unsplash.com/photo-1518705579918-951e2a52f0d1?auto=format&fit=crop&w=600", description: "花园角落的风信子" },
    { id: 5, title: "多彩郁金香", imageUrl: "https://images.unsplash.com/photo-1526404868743-e2110007d8c3?auto=format&fit=crop&w=600", description: "春日郁金香花田" },
    { id: 6, title: "金鸡菊", imageUrl: "https://images.unsplash.com/photo-1557094529-06b6bff52bae?auto=format&fit=crop&w=600", description: "金鸡菊向阳生长" },
    { id: 7, title: "迎春花", imageUrl: "https://images.unsplash.com/photo-1591343685872-b7643a7dece5?auto=format&fit=crop&w=600", description: "春季最早开放的花朵" },
    { id: 8, title: "水仙花", imageUrl: "https://images.unsplash.com/photo-1598880122127-54ee7ab1cc00?auto=format&fit=crop&w=600", description: "窗台水仙优雅绽放" },
    { id: 9, title: "玫瑰花园", imageUrl: "https://images.unsplash.com/photo-1527061018585-d892eeb4ebb2?auto=format&fit=crop&w=600", description: "各色玫瑰争奇斗艳" },
    { id: 10, title: "百合花丛", imageUrl: "https://images.unsplash.com/photo-1519735069893-7b1688d22939?auto=format&fit=crop&w=600", description: "纯洁白百合盛开" },
    { id: 11, title: "绣球花", imageUrl: "https://images.unsplash.com/photo-1588985335000-c17bca60d49d?auto=format&fit=crop&w=600", description: "蓝紫色绣球花簇" },
    { id: 12, title: "菊花展", imageUrl: "https://images.unsplash.com/photo-1470087167738-6aa485ff65d4?auto=format&fit=crop&w=600", description: "秋季菊花怒放" },
  ];

  // 计算分页后的视频数据
  const startIndex = (currentPage - 1) * itemsPerPage;
  const paginatedVideos = videos.slice(startIndex, startIndex + itemsPerPage);

  // 处理分页导航
  const goToPage = (page: number) => {
    setCurrentPage(page);
  };

  // 渲染分页按钮
  const renderPagination = () => {
    const totalPages = Math.ceil(videos.length / itemsPerPage);
    const pages = [];

    // 最多显示7个分页按钮
    const startPage = Math.max(1, currentPage - 3);
    const endPage = Math.min(totalPages, currentPage + 3);

    if (startPage > 1) {
      pages.push(<button key={1} onClick={() => goToPage(1)}>1</button>);
      if (startPage > 2) pages.push(<span key="startEllipsis">...</span>);
    }

    for (let i = startPage; i <= endPage; i++) {
      pages.push(
        <button 
          key={i} 
          onClick={() => goToPage(i)} 
          className={i === currentPage ? 'active' : ''}
        >
          {i}
        </button>
      );
    }

    if (endPage < totalPages) {
      if (endPage < totalPages - 1) pages.push(<span key="endEllipsis">...</span>);
      pages.push(<button key={totalPages} onClick={() => goToPage(totalPages)}>{totalPages}</button>);
    }

    return (
      <div className="pagination">
        <button 
          disabled={currentPage === 1} 
          onClick={() => goToPage(currentPage - 1)}
        >
          上一页
        </button>
        {pages}
        <button 
          disabled={currentPage === totalPages} 
          onClick={() => goToPage(currentPage + 1)}
        >
          下一页
        </button>
      </div>
    );
  };

  return (
    <div className="video-grid-container">
      <div className="video-grid">
        {paginatedVideos.map((video) => (
          <VideoCard key={video.id} video={video} />
        ))}
      </div>
      
      {renderPagination()}
    </div>
  );
};

export default Video;